<template>
    <div>
        <list>
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                     :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">Refreshing ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <cell>
        <div class="report_content_item" @click="detailClick(item)" v-for="item in selectOrderSummaryRPForm">
            <text class="report_content_item_title mg-Bottom">{{item.name}}</text>
            <text class="report_content_item_icon mg-Bottom">规格：{{item.spec}}</text>
            <div class="report_content_item_priceBox">
                <text class="report_content_item_price">数量：x{{item.quantity | number}}</text>
                <div style="display: flex;flex-direction: row;align-items: center">
                    <text class="report_content_item_icon" v-if="item.discount != 0">(优惠折扣：{{item.discount | price}})</text>
                    <text class="report_content_item_price">¥{{item.amount | price}}</text>
                </div>
            </div>
<!--            <div class="report_content_item_botton">-->
<!--                <text class="report_content_item_bottonTitle">查看明细</text>-->
<!--            </div>-->
        </div>
            </cell>
            <loading v-if="selectOrderSummaryRPForm.length>=5" class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">Loading ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </loading>
        </list>
    </div>
</template>

<script>
    import {
        selectOrderSummaryRP
    } from '@/api/apiReport'
    const modal = weex.requireModule('modal')
    export default {
        data() {
            return {
                selectOrderSummaryRPForm: [],
                refreshing: false,
                loadinging: false,
                pageNum: 1,
                pageSize: 20,
            }
        },
        props:[
            'startDate','endDate'
        ],
        filters: {
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value) {
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        created() {
            this.initIconFont()
            this.selectOrderSummaryRPClick()
        },
        methods:{
            detailClick(data){
				console.info(data)
                var _this = this
                eeui.openPage({
                    url: 'root://pages/report/detail.js',
						params:{id:data.productId,type:'order'},
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {

                });
            },
            selectOrderSummaryRPClick() {
                var _this = this
                eeui.loading();
                console.log(_this.startDate)
                console.log(_this.endDate)
                selectOrderSummaryRP({
                    pageNum: _this.pageNum,
                    pageSize: _this.pageSize,
                    startDate:_this.startDate,
                    endDate:_this.endDate
                }).then(res => {
                    res.data.data.forEach(function (item) {
                        _this.selectOrderSummaryRPForm.push(item)
                    })
                    eeui.loadingClose();
                }).catch(err => {
                    console.log(err);
                    eeui.loadingClose();
                });
            },
            onrefresh(event) {
                var _this = this
                // modal.toast({message: 'Refreshing', duration: 1})
                this.refreshing = true
                setTimeout(() => {
                    _this.pageNum = 1;
                    _this.selectOrderSummaryRPForm = []
                    _this.selectOrderSummaryRPClick()
                    this.refreshing = false
                }, 2000)
            },
            orderClick(){
              var _this = this
                _this.selectOrderSummaryRPForm = []
                _this.selectOrderSummaryRPClick()
            },
            onpullingdown(event) {
                console.log("dy: " + event.dy)
                console.log("pullingDistance: " + event.pullingDistance)
                console.log("viewHeight: " + event.viewHeight)
                console.log("type: " + event.type)
            },
            onloading (event) {
                var _this = this
                // modal.toast({ message: 'Loading', duration: 1 })
                this.loadinging = true
                setTimeout(() => {
                    _this.pageNum = this.pageNum + 1;
                    _this.selectOrderSummaryRPClick()
                    this.loadinging = false
                }, 2000)
            },
        }
    }
</script>

<style scoped>
    .report_content_item{
        width: 700px;
        background-color: white;
        border-radius: 10px;
        margin-left: 25px;
        position: relative;
        margin-bottom: 25px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .report_content_item_title{
        font-size: 36px;
        width: 640px;
        lines:1;
        text-overflow: ellipsis;
        margin-top: 4px;
    }
    .report_content_item_right{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 30px;

    }
    .report_content_item_priceBox{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 640px;
        margin-top: 10px;

    }
    .report_content_item_price{
        font-size: 28px;
    }
    .report_content_item_icon{
        font-family: iconfont2;
        font-size: 24px;
        color: rgba(0,0,0,0.2);
        lines:2;
        text-overflow: ellipsis;
    }
    .mg-Bottom{
        margin-bottom: 10px;
    }
    .report_content_item_botton{
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: rgba(0,0,0,0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 640px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 20px;
    }
    .report_content_item_bottonTitle{
        font-size: 26px;
        color: rgba(83,168,255,1);
    }
    .refresh {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
</style>
